<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box1{
				width: 100px;
				height: 100px;
				background: greenyellow;
				position: absolute;
			}
			#box2{
				width: 100px;
				height: 100px;
				position: absolute;
			}
			.box2{
            border:3px dashed gold;
        }
		</style>
		<script>
			class ABC{
				constructor(box1,d,box2){
					this.box1 = document.querySelector(box1);
            		this.box2 = document.querySelector(box2);
            		this.d = d;
				}
				show(){
					var oDiv = this.box1;
            		var d = this.d;
            		var oDiv1 = this.box2;
            		this.box2.onmousedown = function(ev){
            			var ev = ev||ev.event;
                		var x = ev.clientX-this.offsetLeft;
                		this.className = "box2";
                		var y = ev.clientY-this.offsetTop;
                		d.onmousemove = function(ev){
                    		var ev1 = ev||ev.event;
                    		oDiv1.style.left = ev1.clientX - x+"px";
                    		oDiv1.style.top = ev1.clientY-y+"px";
                		}
                		d.onmouseup = function () {
                    		oDiv1.className = "";
                    		oDiv.style.left = oDiv1.offsetLeft+"px";
                   	 		oDiv.style.top = oDiv1.offsetTop+"px";
                    		document.onmousemove = null;
                		}
                		return false;
            		}
				}
			}
			window.onload = function(){
				var T = new ABC("#box1",document,"#box2")
				T.show();
			}
		</script>
	</head>
	<body>
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>
